<template>
  <!-- 系统价格 -->
  <div class="main">
    <div class="center">
      <div class="navbar">
        <Header></Header>
        <!-- 虞都私有化部署套餐 -->
        <div class="sysTs">
          <div class="systitle">套餐价格</div>
          <div class="sys_one flex">
            <div>
              <img src="../../../assets/ConsignmentFourzero/system/699.png" alt="">
            </div>
            <div>
              <img src="../../../assets/ConsignmentFourzero/system/5699.png" alt="">
            </div>
            <div>
              <img src="../../../assets/ConsignmentFourzero/system/dingzhi.png" alt="">
            </div>
            <!-- <img
              src="../../../assets/ConsignmentFourzero/system/xitongtaocan.png"
              alt=""
            /> -->
            <!-- <div class="lijizixun" @click="zixunkefu">立即咨询</div> -->
          </div>
        </div>
        <!-- 虞都互联 -->
        <div class="YuDu">
          <div class="yudu_title">自营商城主题</div>
          <div class="yudu_txt">
            自营商城支持多主题切换，更多主题支持定制。
          </div>
        </div>
        <!-- 项目展示 -->
        <div class="xiangmu">
          <div
            class="one"
            v-for="item in image"
            :key="item.id"
          >
            <img :src="item.url" alt="" />
            <div
              class="zhezhao"
              v-if=" item.id == 4"
              :class="{ display: id == item.id ? 'block' : 'none' }"
            >
              <div class="zzbtn" @click="zixunkefu">更多主题请联系商务定制</div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="zixun">
      <div class="title">
        联系我们 享<span style="color: #5d87ff">更多优惠</span>
      </div>
      <div class="txt">
        专属技术顾问为您免费提供售前咨询,解决方案推荐等一对一服务
      </div>
      <el-button type="primary" @click="zixunkefu">立即咨询</el-button>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
   
    <Lianxiwomen ref="Lianxiwomen"></Lianxiwomen>
  </div>
</template>
  
  <script>
import Header from '../../../components/ConsignmentFourzero/header.vue'
import Footer from '../../../components/ConsignmentFourzero/footer.vue'
import { GetPcfnList } from '../../../api/IntroductionPartners/index'
import Lianxiwomen from "@/components/ConsignmentFourzero/lianxiwomen.vue"
export default {
  components: {
    Header,
    Footer,
    Lianxiwomen
  },
  data() {
    return {
      image: [
        { name: '1', id: 1, url: 'https://imgage.maimaihao.com/themes/guanwang/1.png' },
        { name: '2', id: 2, url: 'https://imgage.maimaihao.com/themes/guanwang/2.png' },
        { name: '3', id: 3, url: 'https://imgage.maimaihao.com/themes/guanwang/3.png' },
        { name: '4', id: 4, url: 'https://imgage.maimaihao.com/themes/guanwang/4.png' },
        // { name: '迈游吧', id: 2, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e37fd93579.jpg', locat: 'http://maiyouba.com' },
        // { name: '淘号趣', id: 3, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e3cfcf357a.jpg', locat: 'https://taohaoqu.com' },
        // { name: '无名', id: 4, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e415f4357b.jpg', locat: 'https://www.wumingyou.com' },
        // { name: '怪兽玩', id: 5, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e454ae357c.jpg', locat: 'https://www.guaishouwan.com' },
        // { name: '牛牛', id: 6, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e49740357d.jpg', locat: 'http://yuedong.pc.ikbh.top' },
      ],
      id: null,
      centerDialogVisible: false,
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      list7: [],
      list8: [],
      list9: [],
      list10: [],
      list11: [],
      list12: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getOne(i) {
      console.log('33333', i);
      this.id = i.id
    },
    leaveOut() {
      this.id = null
    },
    openUrl(item) {
      if (item.locat == '') return
      window.open(item.locat)
    },
    zixunkefu() {
      this.$refs.Lianxiwomen.open()
    },
    async getList() {
      const res = await GetPcfnList({ type: 2 })
      console.log(res);
      this.list = res.rows.slice(0, 2)
      this.list1 = res.rows.slice(2, 4)
      this.list2 = res.rows.slice(4, 6)
      this.list3 = res.rows.slice(6, 9)
      this.list4 = res.rows.slice(9, 12)
      this.list5 = res.rows.slice(12, 16)
      this.list6 = res.rows.slice(16, 19)
      this.list7 = res.rows.slice(19, 23)
      this.list8 = res.rows.slice(23, 26)
      this.list9 = res.rows.slice(26, 29)
      this.list10 = res.rows.slice(29, 31)
      this.list11 = res.rows.slice(31, 33)
      this.list12 = res.rows.slice(33, 35)
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #000;
}
.center {
  .navbar {
    width: 1200px;
    margin: 0 auto;
  }

  .sysTs {
    background-color: #fff;
    // height: 1177px;
    .systitle {
      padding-top: 26px;
      width: 288px;
      background: linear-gradient(
        135deg,
        #b620e0 0%,
        #32c5ff 100%
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      font-weight: 800;
      font-size: 32px;
      color: #fff;
      margin: 0 auto;
    }
    .sys_one {
      padding: 26px;
      background-color: #fff;
      >div{
        width: 33%;
      }
      img{
        width: 100%;
      }
    
    }
  }

  .YuDu {
    text-align: center;
    padding: 20px 0;
    .yudu_title {
      font-weight: 800;
      font-size: 32px;
      color: #ffffff;
    }

    .yudu_txt {
      padding-top: 5px;
      font-weight: 800;
      font-size: 20px;
      color: #ffffff;
    }
  }

  .xiangmu {
    display: flex;
    flex-wrap: wrap;
    .one {
      position: relative;
      width: 593px;
      height: 490px;
      margin-right: 14px;
      margin-bottom: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .one:nth-child(2n) {
      margin-right: 0;
    }

    .zhezhao {
      width: 593px;
      height: 490px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      // display: none;
      .zzbtn {
        padding: 10px 15px;
        text-align: center;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        font-weight: 800;
        font-size: 24px;
        width: 310px;
        height: 58px;
        background: rgba(24,31,75,0.9);
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
        border-radius: 10px;
        border: 2px solid;
        // border-image: linear-gradient(180deg, rgba(210, 212, 218, 1), rgba(233, 233, 236, 1), rgba(255, 255, 255, 1)) 2 2;
      }
    }
  }

  .hzhb {
    margin-top: 26px;
    width: 1200px;
    height: 526px;
    background-color: #fff;

    .top {
      display: flex;
      .box {
        width: 80px;
        margin-right: 13.3px;
        .one {
          width: 80px;
          height: 80px;
          background: #d8d8d8;
          border-radius: 10px;
          margin-bottom: 16px;
          .img_hb {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            overflow: hidden;
          }
        }
      }
    }

    .gongsi {
      text-align: center;
      .hezuo {
        font-weight: 800;
        font-size: 32px;
        color: #333333;
        margin-top: -10px;
      }
    }
  }
}

.zixun {
  width: 100%;
  height: 188px;
  background-color: #fff;
  padding: 32px 0;
  text-align: center;

  .title {
    font-weight: 500;
    font-size: 32px;
    color: #333333;
  }

  .txt {
    font-weight: 500;
    font-size: 20px;
    color: #999999;
    padding-top: 21px;
  }

  .btn {
    width: 96px;
    height: 32px;
    line-height: 32px;
    background: #5d87ff;
    border-radius: 4px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 20px;
  }
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #e2887d, #87aebf);

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
</style>